# Interruptor / Toggle

### Código

```
<button></button>
```

### Tokens

#### Color

| Class                                                    | **Property**     | **Color token** |
| :------------------------------------------------------- | :--------------- | :-------------- |
| `.bx--label`                                             | text color       | `$text-02`      |
| `.bx--toggle__text--left`                                | text color       | `$text-01`      |
| `.bx--toggle__appearance:before`                         | background-color | `$ui-04`        |
| .bx–toggle__appearance:after                             | background-color | `$ui-03`        |
| `.bx--toggle:checked +` `.bx--toggle__appearance:before` | background-color | `$support-02`   |
| `.bx--toggle:checked +` `.bx--toggle__appearance:after`  | background-color | `$icon-03`      |
| .bx–toggle:checked                                       | background-color | `$support-02`   |
| .bx–toggle__check                                        | fill             | `$support-02`   |

#### Estados interactivos

| Class                                                     | **Property**     | **Color token** |
| :-------------------------------------------------------- | :--------------- | :-------------- |
| `.bx--toggle__appearance:focus`                           | border           | `$focus`        |
| `.bx--label:disabled`                                     | text color       | `$disabled-02`  |
| `.bx--toggle__text--left:disabled`                        | text color       | `$disabled-02`  |
| `.bx--toggle:disabled +` `.bx--toggle__appearance:before` | background-color | `$disabled-01`  |
| `.bx--toggle:disabled +.bx--toggle__appearance:after`     | background-color | `$disabled-02`  |

#### Estructura

Imerruptor normal

| Class                           | **Property**              | Px   | **Spacing token** |
| :------------------------------ | :------------------------ | :--- | :---------------- |
| `.bx--toggle__appearance`       | width                     | 48   | `-`               |
| `.bx--toggle__appearance`       | height                    | 24   | `-`               |
| `.bx--toggle__appearance:after` | height, width             | 18   | `-`               |
| `.bx--toggle__label`            | margin-top, margin-bottom | 16   | `$spacing-05`     |
| `.bx--toggle__text--left`       | margin-left               | 8    | `$spacing-05`     |

Imerruptor pequeño

| Class                                               | **Property**              | Px   | **Spacing token** |
| :-------------------------------------------------- | :------------------------ | :--- | :---------------- |
| `.bx--toggle--small`                                | width                     | 16   | `-`               |
| `.bx--toggle--small`                                | height                    | 32   | `-`               |
| `.bx--toggle--small +.bx--toggle__appearance:after` | height, width             | 10   | `-`               |
| `.bx--toggle--small`                                | margin-top, margin-bottom | 16   | `$spacing-05`     |